/*
 * @Author: yangzonglong
 * @Date: 2021-02-22 13:56:10
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-06-30 14:25:13
 * @Auditor: 
 */
import React, { useEffect, useState } from 'react';
import { Modal, Form, Select } from 'antd'
import { menus } from '../../../../config'

interface Props {
  visible: boolean;
  initialValue: string;
  onCancel: () => void;
  onOk: (value: string) => void;
}


const EditForm = ({ visible, onOk, onCancel, initialValue }: Props) => {
  const [value, setValue] = useState<string>('')
  const [modelSource, setModelSource] = useState<any[]>([])


  useEffect(() => {
    if (initialValue) setValue(initialValue)
  }, [initialValue])

  useEffect(() => {
    const _v = menus.reduce((all: any[], now) => {
      return [...all, ...now.children]
    }, [])
    setModelSource(_v)
  }, [])

  const _onOK = () => {
    setValue('')
    onOk(value)
  }
  const _onCancel = () => {
    setValue('')
    onCancel()
  }

  return (
    <Modal destroyOnClose visible={visible} title='编辑类型' width={600} onOk={_onOK} onCancel={_onCancel}>
      <Form>
        <Form.Item label='选择类型'>
          <Select
            value={value}
            onChange={setValue}>
            {modelSource.map(item => (
              <Select.Option key={item.type} value={item.type}>{item.title}</Select.Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default EditForm;